import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { Divider, Layout, Menu, theme } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import { homeRouter } from '../router';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { Button, Flex } from 'antd';
// 引入登录
import Login from './Login'
// 对话框
import { Modal } from 'antd';

// icon 
import {
    LaptopOutlined,
    HomeFilled,
    PlusSquareFilled,
    SettingFilled,
    StarFilled,
} from "@ant-design/icons";

const MenuIcon = (iconType: string): React.ReactNode => {
    switch (iconType) {
        case 'HomeFilled':
            return <HomeFilled style={{ color: "#FBD05C" }} />;
        case 'LaptopOutlined':
            return <LaptopOutlined style={{ color: "#2C72FF" }} />;
        case 'PlusSquareFilled':
            return <PlusSquareFilled style={{ color: "#24E7A1" }} />;
        case 'SettingFilled':
            return <SettingFilled style={{ color: "#FFAA00" }} />;
        case 'StarFilled':
            return <StarFilled style={{ color: "#FFAA00" }} />;
    }
}

const onChange = (key: string) => {
    console.log(key);
};
const tabs: TabsProps['items'] = [
    {
        key: '1',
        label: '免费模版'
    },
    {
        key: '2',
        label: '开通会员'
    },
    {
        key: '3',
        label: '产品服务'
    },
    {
        key: '4',
        label: '解决方案'
    },
    {
        key: '5',
        label: '内容中心'
    },
    {
        key: '6',
        label: '资源与合作'
    },
];

// 引入类型
import * as Type from '../type/index'
import { ItemType } from 'antd/es/menu/hooks/useItems';
import { SizeType } from 'antd/es/config-provider/SizeContext';

const { Header, Content, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items = (arr: Type.RouterList) => {
    let newarr: ItemType[] = []
    arr.forEach((item: Type.RouterItem, index: number) => {
        newarr.push(
            getItem(<NavLink to={item.path}>{item.title}</NavLink>, index, MenuIcon(item.icon),
            ),
        )
    })
    return newarr
}

const App: React.FC = () => {

    // 对话框
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    // 按钮大小
    const [size, setSize] = useState<SizeType>('large');


    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return (
        <Layout >
            <Header style={{ display: 'flex', alignItems: 'center', background: '#fff' }} >
                <img src="/src/img/logo.gif" alt="" />
                <Tabs defaultActiveKey="1" items={tabs} onChange={onChange} style={{ margin: '0 6rem' }} />
                <Flex gap="small" wrap="wrap">
                    <Button size={size} type="primary" style={{ marginLeft: '15rem' }} onClick={showModal}>登录/注册</Button>
                </Flex>
                <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    {/* 登录 */}
                    <Login />
                </Modal>
            </Header>
            <Layout>
                <Sider width={200} style={{ background: colorBgContainer }}>
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['0']}
                        defaultOpenKeys={['sub1']}
                        style={{ height: '88vh', borderRight: 0 }}
                        items={items(homeRouter)}
                    />
                </Sider>
                <Layout>
                    <Content
                        style={{
                            padding: 24,
                            margin: 0,
                            height: '88vh',
                            overflowY: 'auto',
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>
        </Layout >
    );
};

export default App;